<!--
 * @Author: zjj
 * @Date: 2019-11-11 11:45:24
 * @LastEditors: zjj
 * @LastEditTime: 2019-11-11 11:47:21
 -->
<!--  -->
<template>
  <div class="deliver-detail">
    <Nav title="订单跟踪">
      <template v-slot:left>
        <span class="back" @click="$router.back()"></span>
      </template>
    </Nav>
    <div class="deliver-title flex aligin-center f-14 f-medium pl-18">{{deliverInfo.com?deliverInfo.com||""+":":''}} {{deliverInfo.num}}</div>
    <div class="divide-line"></div>
    <div class="pd-14">
      <template v-for="(item,index) in deliverInfo.detail">
        <div class="deliver-item ml-26 f-12 color-gray" :key="index">
          <div :class="[index==0?'color-black':'']">{{item.context}}</div>
          <div>{{item.time}}</div>
          <span :class="['dot',index==0?'red-dot':'']"></span>
        </div>
      </template>
      <div class="no-data" v-if="deliverInfo.detail.length==0"></div>
    </div>
  </div>
</template>

<script>
import Nav from "../../components/Nav";
import { shippingStatus } from "../../api/api";
export default {
  components: { Nav },
  data() {
    return {
      deliverInfo: {detail:[]}
    };
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {
    shippingStatus({ order_no: this.$route.params.id, limit: 0 }).then(
      ({ data: { result } }) => {
        this.deliverInfo = result;
      }
    );
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.pd-14 {
  padding: 14px 0;
}
.deliver-detail {
  height: 100%;
  .deliver-title {
    height: 52px;
  }
  .deliver-item {
    position: relative;
    padding: 0 0 29px 15px;
    width: 312px;
    line-height: 22px;
    border-left: 2px solid #bcbcbc;
    &:last-child {
      border-left: 2px solid #fff;
    }
    .dot {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(calc(-50% - 1px), 0);
      height: 8px;
      width: 8px;
      border-radius: 50%;
      background: #bcbcbc;
    }
  }
}
.red-dot {
  height: 12px !important;
  width: 12px !important;
  background: linear-gradient(
    117deg,
    rgba(232, 48, 56, 1),
    rgba(247, 88, 151, 1)
  ) !important;
}
.color-black {
  font-size: 13px;
  color: #000;
  font-weight: 500;
}
</style>